<template>
	<view class="container">
		<view class="top_box">
			<view class="left_box">
				<view class="xjs-size-48 xjs-weight-bold">￥{{table.unsettledBalance}}</view>
				<view class="xjs-size-24 xjs-mt-16">未结算(元)</view>
			</view>
			<view class="center_box"></view>
			<view class="right_box">
				<view class="xjs-size-48 xjs-weight-bold">￥{{table.settlementBalance}}</view>
				<view class="xjs-size-24 xjs-mt-16 linehei1">已结算(元)</view>
			</view>
		</view>
		<view class="content">
			<view class="order_type_tab_box">
				<view :class="['order_type_tab_head',item.status===table.status? 'order_type_tab_head_active':'']"
					@click="handleChangeStatus(item)" v-for="item in tabStatus" :key="item.status">
					<view class="type_text">{{ item.name }}</view>
					<view class="active_type"></view>
				</view>
			</view>
			<view class="main">
				<view class="list_box" v-for="item in table.list" :key="item.id" @click="goDateils(item)">
					<view class="head_text">
						<view class="lf lf-between lf-center">
							<view>
								<view class="xjs-size-30 xjs-weight-bold" v-if="item.type==1">服务收益</view>
								<view class="xjs-size-30 xjs-weight-bold" v-if="item.type==4">推广收益</view>
								<view class="xjs-size-30 xjs-weight-bold" v-if="item.type==5">工作室接单服务费</view>
							</view>
							
							<view class="xjs-ml-16 linehei1">
								<text class="xjs-size-26" v-if="item.status==1">待结算</text>
								<text class="xjs-size-26" v-else-if="item.status==2">已失效</text>
								<text class="xjs-size-26" v-else>已结算</text>
							</view>
						</view>
					</view>
					<view class="lf lf-between xjs-pt-32">
						<view class="left_text">订单金额</view>
						<view class="xjs-size-28">¥{{item.payAmount}}</view>
					</view>
					<view class="lf lf-between xjs-pt-32">
						<view class="left_text">预估收益</view>
						<view class="xjs-size-28">¥{{item.income}}</view>
					</view>
					<view class="lf lf-between xjs-pt-32">
						<view class="left_text">订单编号</view>
						<view class="xjs-size-28">{{item.orderId}}</view>
					</view>
				</view>
			</view>
			<view class="noRecord" v-if="table.loading">
				暂无记录～
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {useStudioStoreToRefs} from '@/store/useStudioStore'
	const {studio} = useStudioStoreToRefs()
	import { reactive } from 'vue'
	import { onPullDownRefresh, onReachBottom, onLoad } from '@dcloudio/uni-app'
	import api from '@/api/index'

	const tabStatus = reactive([
		{ name: '全部', status: '' },
		{ name: '待结算', status: '1' },
		{ name: '已结算', status: '0' },
	])
	const table = reactive<{
		loading : boolean
		list : []
		page : number
		limit : number
		finished : boolean
		status : number | string
		studioId:number | string
		settlementBalance:number | string
		unsettledBalance:number | string
		userId:string
	}>({
		loading: false,
		list: [],
		page: 1,
		limit: 10,
		finished: false,
		status: '',
		studioId:'',
		userId:'',
		settlementBalance:'',
		unsettledBalance:''
	})
	const goDateils = (item) => {
		if(item.serviceType=='0'){
			//主服务
			uni.navigateTo({
				url: '/pages/studioOrders/orderDetail/index?orderType=0&id='+item.orderId
			})
		}else{
			//增值服务
			uni.navigateTo({
				url: '/pages/studioOrders/addedServicesDetail/index?orderType=0&id='+item.orderId
			})
			
		}
		
	}
	// 获取数据
	const onDataGet = () => {
		let status = table.status
		return new Promise(async (resolve, reject) => {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			try {
				const res:any = await api({
					method: 'get',
					contentType: 'json',
					url: '/mall/studio/studio-balance-record/getIncomePage',
					data: {
						page: table.page,
						limit: table.limit,
						userId:table.userId,
						status: status,
						studioId:studio.value.id
					}
				})
				table.settlementBalance = res.data.extra.settlementBalance
				table.unsettledBalance = res.data.extra.unsettledBalance
				if (res.data.records.length != 0) {
					table.list = table.list.concat(res.data.records);
					table.finished = true
				}else{
					table.finished = false
				}
				if (table.list.length <= 0) {
					table.loading = true
				}
				uni.hideLoading()
				resolve(true)
			} catch (error) {
				uni.hideLoading()
				table.loading = false
				table.finished = true
				reject(false)
			}
		})
	}

	// 数据初始化
	const onDataInit = async () => {
		table.finished = false
		table.page = 1
		table.list = []
		table.loading = false
	}
	const handleChangeStatus = async (item : any) => {
		table.status = item.status
		scrollToTop()
		onDataInit()
		onDataGet()
	}
	const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}
	// 触底
	onReachBottom(() => {
		if (table.finished && !table.loading) {
			table.page++
			onDataGet()
		}
	})
	onLoad((e) => {
		table.userId = e.userId
		onDataGet()
	})
</script>

<style lang="scss" scoped>
	.act {
		color: #6363FF;
	}
	.linehei1{
		line-height: 1;
	}
	.noRecord{
		margin-top: 30%;
		text-align: center;
		font-size: 32rpx;
	}
	.order_type_tab_box {
		position: sticky;
		top: 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0 160rpx;
		background-color: #F9F6F6;
		box-sizing: border-box;
		z-index: 1;
		margin-bottom: 40rpx;
	}

	.order_type_tab_head {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 88rpx;
		padding-top: 20rpx;
		box-sizing: border-box;

		.type_text {
			font-weight: 400;
			font-size: 30rpx;
			height: 100%;
			color: #5C5E5E;
			text-align: center;
		}

	}

	.order_type_tab_head_active {
		.type_text {
			font-weight: bold;
			font-size: 40rpx;
			color: #1B2120;
		}

		.active_type {
			bottom: 0;
			width: 44rpx;
			height: 8rpx;
			background: var(--color-primary);
			border-radius: 4rpx;
		}
	}

	.lf {
		display: flex;
	}

	.lf-between {
		justify-content: space-between;
	}

	.lf-center {
		align-items: center;
	}

	.container {
		padding-bottom: var(--safe-area-bottom);
	}

	.top_box {
		text-align: center;
		display: flex;
		// justify-content: space-around;
		align-items: center;
		margin: 32rpx 32rpx 48rpx 32rpx;
		height: 248rpx;
		background: var(--card-bg-color) !important;
		color: #FFFFFF;
		border-radius: 24rpx;

	}
	.left_box{
		width: 49.5%;
	}
	.right_box{
		width: 49.5%;
	}
	.center_box {
		height: 72rpx;
		width: 1px;
		background-color: #FFFFFF;
	}

	.content {
		.time_box {
			display: flex;
			justify-content: space-between;
			margin: 32rpx 32rpx 24rpx 32rpx;
			height: 96rpx;
			line-height: 96rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 0 32rpx;
		}

		.time_text {
			font-weight: bold;
			font-size: 32rpx;
		}

		.revenue {
			color: #7C807F;
			font-size: 26rpx;
		}

		.list_box {
			border-radius: 24rpx;
			background: #FFFFFF;
			padding: 40rpx 32rpx;
			align-items: center;
			margin: 0rpx 32rpx 24rpx 32rpx;
		}

		.head_text {
			
			border-bottom: 1rpx solid #E4E6E6;
			padding-bottom: 34rpx;
		}

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.left_text {
			font-size: 28rpx;
			color: #7C807F;
		}
	}
</style>